<!-- 实际呈现效果的组件 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref">seller display</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      allData: null,
      currentPage: 2,
      totalPage: 0,
      pageSize: 5,
      timerId: null,
    };
  },

  created() {
    this.$socket.registerCallBack("sellerData", this.getData);
  },

  mounted() {
    this.initChart();
    this.getData();

    // this.$socket.send({
    //   action: "getData",
    //   socketType: "sellerData",
    //   chartName: "seller",
    //   value: "",
    // });

    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },

  methods: {
    //初始化echarts实例对象,要在dom结果加载完成后调用
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.seller_ref, "chalk");

      const initOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            z: 0,
            type: "line",
            lineStyle: {
              color: "#2d3443",
            },
          },
        },
        title: {
          text: "▍TOP供应商PPM情况",
          left: 20,
          top: 20,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          // 图表区域是否包含坐标轴文字,防止溢出
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        series: {
          type: "bar",
          label: {
            show: true,
            position: "right",
            color: "white",
          },

          itemStyle: {
            // 线性渐变对象来控制渐变,要指明方向(前四个参数),和不同百分比的颜色值(后面的数组,可以放多个对象)
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //0%的颜色
              {
                offset: 0,
                color: "#5052ee",
              },
              // 100%的颜色
              {
                offset: 1,
                color: "#ab6ee5",
              },
            ]),
          },
        },
      };

      this.myChart.setOption(initOption);

      // 监听鼠标移入图表时,停止定时器循环播放
      this.myChart.on("mouseover", () => {
        clearInterval(this.timerId);
      });

      // 鼠标移出图表后继续自动循环播放
      this.myChart.on("mouseout", () => {
        this.startInterval();
      });
    },

    // 获取数据
    async getData() {
      // 商家销售数据,地址是http://127.0.0.1:8888/api/seller
      const { data: ret } = await this.$http.get("seller");
      // console.log(ret);
      this.allData = ret;

      // 对数据进行排序
      this.allData.sort((a, b) => {
        return a.value - b.value;
      });

      this.totalPage =
        this.allData.length % 5 == 0
          ? this.allData.length / this.pageSize
          : this.allData.length / 5 + 1;

      this.updateChart();
      this.startInterval();
    },

    // 更新图表
    updateChart() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      // console.log(`start:${start}----end:${end}----total:${this.totalPage}`);
      const showData = this.allData.slice(start, end);
      // console.log(showData);
      const sellerNames = showData.map((item) => {
        return item.name;
      });
      const sellerValues = showData.map((item) => {
        return item.value;
      });
      const dataOption = {
        yAxis: {
          data: sellerNames,
        },
        series: {
          data: sellerValues,
        },
      };

      this.myChart.setOption(dataOption);
    },

    destroyed() {
      this.$socket.unregisterCallBack("sellerData");
      clearInterval(this.timerId);
    },
    startInterval() {
      // 习惯提前判断timerId是否存在
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }

        this.updateChart();
      }, 3000);
    },

    screenAdapter() {
      // console.log(this.$refs.seller_ref.offsetWidth);
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            z: 0,
            type: "line",
            lineStyle: {
              width: titleFontSize,
              color: "#2d3443",
            },
          },
        },
        title: {
          text: "▍TOP供应商PPM情况",
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: {
          barWidth: titleFontSize,
          itemStyle: {
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
          },
        },
      };

      this.myChart.setOption(adapterOption);

      // 收到调用resize才能产生效果
      this.myChart.resize();
    },
  },
};
</script>
<style lang=""></style>
